<template>
  <div class="tabs">
    <a-tabs v-model:activeKey="activeKey" @change="changeSelect">
      <a-tab-pane v-for="item in options" :key="item.key" :tab="item.tab"></a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch } from "vue";

interface IOptions {
  key: number | string;
  tab: string;
}

export default defineComponent({
  props: {
    value: {
      type: String,
      default: 0,
    },
    options: {
      type: Array,
      default: (): IOptions[] => {
        return [];
      },
    },
  },
  emits: ["change", "input"],
  setup(props, { emit }) {
    const activeKey = ref<number | string>(0);
    let options = reactive<IOptions[]>([]);
    options = props.options as IOptions[];

    watch(
      () => props.value,
      (n) => {
        activeKey.value = n;
      }
    );

    const changeSelect = (key: number) => {
      emit("change", key);
    };

    return {
      activeKey,
      options,
      changeSelect,
    };
  },
});
</script>
